import { BetaSchemaForm, ProFormColumnsType, ProFormInstance } from "@ant-design/pro-components";
import { useRef } from "react";

type DataItem = {
    name: string;
    state: string;
};

const columns: ProFormColumnsType<DataItem>[] = [
    {
      title: '标题',
      dataIndex: 'title',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    //   width: 'md',
    //   colProps: {
    //     xs: 24,
    //     md: 12,
    //   },
      initialValue: '默认值',
      convertValue: (value) => {
        return `标题：${value}`;
      },
      transform: (value) => {
        return {
          title: `${value}-转换`,
        };
      },
    }
]

export const Styles = () => {

    const formRef = useRef<ProFormInstance>();

    const onChange = () => {

    }

    return <div>
        <BetaSchemaForm<DataItem>
            formRef={formRef}
            layoutType={'Form'}
            layout='horizontal'
            colProps={{
              span: 24,
            }}
            grid={true}
            onFieldsChange={onChange}
            onChange={(e)=> {
                // console.log('e', e)
                // onChange(e.target.id, e.target.value)
            }}
            onFinish={async (values) => {
              console.log(values);
            }}
            columns={columns}
            submitter={false}
          />
    </div>
}